<template>
  <div>
    <el-card shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div>
        <el-row>
          <el-col :span="6">
            <span style="margin-right: 10px">作者</span
            ><el-input
              style="width: 250px"
              placeholder="请输入作者"
              v-model="author"
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            <span style="margin-right: 10px">标题</span
            ><el-input
              style="width: 250px"
              placeholder="请输入标题"
              v-model="title"
              clearable
            >
            </el-input>
          </el-col>

          <el-col :span="6">
            <span style="margin-right: 10px">编辑类型</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-button @click="reset">重置</el-button>
            <el-button @click="search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card box-card2">
      <div slot="header" class="clearfix">
        <el-button size="small" @click="toadd" type="primary">新增</el-button>
      </div>
      <div class="text item">
        <el-table :data="articleData" border>
          <el-table-column align="center" label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column
            align="center"
            prop="title"
            label="文章标题"
          ></el-table-column>
          <el-table-column align="center" prop="" label="展示图片" width="200">
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.coverImg"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="添加时间"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="author"
            label="文章作者"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="文章是否显示"
            width="80"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isShow"
                :active-value="1"
                :inactive-value="0"
                @change="switchShow(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="内容"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag>{{
                scope.row.editorType ? "Markdown" : "富文本"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="操作"
            width="260"
          >
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="primary"
                >编辑文章</el-button
              >
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
          <pagination
      @limitfather="limitchange"
      @startfather="startchange"
      :totalNumber="totalnumber"
    ></pagination>
    </el-card>


  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
import articleApi from "@/api/article";
export default {
  components: { pagination },

  data() {
    return {
      author: "",
      title: "",
      options: [
        {
          value: "选项1",
          label: "富文本",
        },
        {
          value: "选项2",
          label: "Markdown",
        },
      ],
      value: "",
      articleData: [],
      totalnumber: 0,
      start: 1,
      limit: 10,
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    // 到新增文章页面
    toadd() {
      this.$router.push({ path: "/content/addArticle" });
    },
    // 重置
    reset() {
      this.start = 1;
      this.limit = 10;
      this.author = "";
      this.title = "";
      this.init();
    },
    // 搜索
    search() {
      this.start = 1;
      this.limit = 10;
      this.init();
    },
    // 获取数据
    init() {
      articleApi
        .articleList(this.start, this.limit, {
          author: this.author,
          title: this.title,
        })
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.articleData = res.data.rows;
            this.totalnumber = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 修改某一项
    edit(data) {
      console.log(data);
      this.$router.push({
        name: "editArticle",
        query: {
          id: data.id,
          start: this.start,
          limit: this.limit,
        },
      });
    },
    // 删除某一项
    del(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        articleApi.articleDelete(data.id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 切换文章显示否
    switchShow(rows) {
      var temp = rows.isShow;
      console.log(rows);
      articleApi
        .changeShowStatus({
          id: rows.id,
          isShow: rows.isShow ? 1 : 0,
        })
        .then((res) => {
          console.log(res);
          if (res.success) {
            if (!rows.isShow) {
              this.$notify.success({
                title: "隐藏成功",
                showClose: true,
                duration: 2000,
              });
            } else {
              this.$notify.success({
                title: "显示成功",
                showClose: true,
                duration: 2000,
              });
            }
          } else {
            rows.isShow = !temp;
            this.$message.error(res.message);
          }
        });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    currentPage2(e) {
      console.log(e);
    },
  },

  computed: {},

  watch: {},
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 97%;
  margin: 15px auto;
}
</style>
